<script setup>
import { ref, reactive, watch, nextTick, computed } from 'vue'
import { UserFilled } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
const router = useRouter()
const userStore = useUserStore()
const circleUrl = ref(userStore.userInfo.image_url)
watch(
  () => userStore.userInfo.image_url,
  (newVal) => {
    circleUrl.value = newVal
  }
)

function logout(e) {
  userStore.clearUserInfo()
  router.replace('/login')
}
const titleContent = computed(() => {
  if (userStore.userInfo.name) {
    return userStore.userInfo.name
  } else if (userStore.userInfo.college === '*' && userStore.userInfo.identity === '管理员') {
    return '超级管理员'
  }else if(userStore.userInfo.college !== '*' && userStore.userInfo.identity === '管理员'){
    return userStore.userInfo.college+'管理员'
  }else {
    return userStore.userInfo.account
  }
})
</script>

<template>
  <div class="title-wrapper">
    <div class="logo">实习就业管理系统</div>
    <div class="user-info">
      <span class="text"
        ><span style="margin-right: 12px">欢迎</span
        >{{ titleContent }}</span
      >
      <el-avatar style="margin-right: 10px" :size="45" v-if="circleUrl" :src="circleUrl" />
      <el-avatar
        v-else
        style="margin-right: 10px"
        :size="45"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
      <el-popconfirm title="你确定要退出吗" @confirm="logout">
        <template #reference>
          <span style="color: white; margin-left: 10px">退出登录</span>
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #1f45f0;
  .logo {
    width: 350px;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    font-family: 'PMZDR';
    color: white;
    letter-spacing: 12px;
    font-style: oblique;
  }
  .user-info {
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    .text {
      margin-left: 10px;
      font-size: 16px;
      color: white;
      margin-right: 15px;
    }
    &::before {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgb(4, 233, 4);
      top: 50%;
      transform: translateY(-50%);
      left: -5px;
    }
  }
}
</style>
